<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过滤</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 数组遍历 -->
        <h2>人员列表</h2>
        <input type="text" v-model="keyWord">
        <ul>
            <!-- for in行  for of报错 -->
            <li v-for="(p, index) in persons" :key="index">
                {{p.name}} - {{p.age}} - {{p.sex}}
            </li>
        </ul>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false;   // 阻止vue 在启动时生成生产提示
    // 用watch实现
    // #region
    /* new Vue({
        el: "#root",
        data: {
            keyWord: "",
            persons: [],
            personsOld: [
                {
                    id: 1,
                    name: "马冬梅",
                    age: 20,
                    sex: '女'
                },
                {
                    id: 2,
                    name: "周冬雨",
                    age: 21,
                    sex: '女'
                },
                {
                    id: 3,
                    name: "周杰伦",
                    age: 32,
                    sex: '男'
                },
                {
                    id: 3,
                    name: "温兆伦",
                    age: 40,
                    sex: '男'
                }
            ]
        },
        watch: {
            "keyWord": {
                immediate: true,    // 立即执行handler,初始化时执行一次,这时候val为"", 又因为""是所有字符串的子串,所以初始化时会把所有人都显示出来
                handler(val) {
                    this.persons = this.personsOld.filter((p)=> {
                        return p.name.indexOf(val) !== -1
                    });
                }
            }
        }
    }) */
    // #endregion

    // 用computed实现
    new Vue({
        el: "#root",
        data: {
            keyWord: "",
            personsOld: [
                {
                    id: 1,
                    name: "马冬梅",
                    age: 20,
                    sex: '女'
                },
                {
                    id: 2,
                    name: "周冬雨",
                    age: 21,
                    sex: '女'
                },
                {
                    id: 3,
                    name: "周杰伦",
                    age: 32,
                    sex: '男'
                },
                {
                    id: 3,
                    name: "温兆伦",
                    age: 40,
                    sex: '男'
                }
            ]
        },
        computed: {
            // 初始化时会执行一次和数据改变时也会执行，因此和watch的效果一样的时候，优先使用computed
            persons() {
                return this.personsOld.filter(p => {
                    // 返回符合条件需要的元素构成的新数组（新数组不影响旧数组）
                    return p.name.indexOf(this.keyWord) !== -1
                })
            }
        }
    })
</script>
</html>